<template>
  <div
    class="dialog-list"
    v-if="showAreaModal || showArrowModal || showLocationModal"
    :style="{ left: position.x, top: position.y }"
  >
    <el-dialog
      :visible.sync="showAreaModal"
      title="绘制区域 统计查询"
      width="400px"
      :fullscreen="false"
      :modal="false"
      :modal-append-to-body="false"
      :append-to-body="false"
      :before-close="handleCancelArea"
    >
      <AreaForm @save="handleSaveArea" @delete="handleRemoveArea" />
    </el-dialog>

    <el-dialog
      title="箭头"
      :visible.sync="showArrowModal"
      width="400px"
      :fullscreen="false"
      :modal-append-to-body="false"
      :append-to-body="false"
      :modal="false"
      :before-close="handleCancelArrow"
    >
      <ArrowForm @save="handleSaveArrow" @delete="handleRemoveArrow" />
    </el-dialog>
    <el-dialog
      title="标点"
      :visible.sync="showMarkModal"
      width="400px"
      :fullscreen="false"
      :modal-append-to-body="false"
      :append-to-body="false"
      :modal="false"
      :before-close="handleCancelMark"
    >
      <MarkForm @save="handleSaveMark" @delete="handleRemoveMark" />
    </el-dialog>
  </div>
</template>
<script>
import * as API from '@/api/area';
export default {
  name: "dialog-list",
  data() {
    return {
      left: 0,
      top: 0,
      showAreaModal: false,
      showArrowModal: false,
      showMarkModal: false,
      areaModel: {
        areaName: "",
        remake: "",
        color: "#ff0000",
      },
      arrowModel: {
        areaName: "",
        remake: "",
        color: "#ff0000",
        lineWidth: 2,
      },
      locationModel: {
        areaName: "",
        remake: "",
        symbol: "default",
        symbolSize: 2,
        whetherName: 1,
      },
    };
  },
  methods: {
    handleCancelArea() {
      this.$emit('cancel', { type: 'area' });
    },
    handleRemoveArea() {
      this.$emit('remove', { type: 'area' });
    },
    handleCancelArrow() {
      this.$emit('cancel', { type: 'arrow' });
    },
    handleRemoveArrow() {
      this.$emit('remove', { type: 'arrow' });
    },
    handleCancelMark() {
      this.$emit('cancel', { type: 'mark' });
    },
    handleRemoveMark() {
      this.$emit('remove', { type: 'mark' });
    },
    async handleSaveMark(values) {
      const res = await API.saveArea({
        ...values,
        lnglat: JSON.stringify(this.dataSource),
      });
      if (res.code === 200) {
        this.$message.success('保存成功');
        this.$emit('success', { type: 'mark' });
      } else {
        this.$message.warning(res.msg);
      }
    },
    async handleSaveArrow(values) {
      const res = await API.saveArea({
        ...values,
        paths: JSON.stringify(this.dataSource),
      });
      if (res.code === 200) {
        this.$message.success('保存成功');
        this.$emit('success', { type: 'arrow' });
      } else {
        this.$message.warning(res.msg);
      }
    },
    async handleSaveArea(values) {
      const res = await API.saveArea({
        ...values,
        bounds: JSON.stringify(this.dataSource),
      });
      if (res.code === 200) {
        this.$message.success('保存成功');
        this.$emit('success', { type: 'area' });
      } else {
        this.$message.warning(res.msg);
      }
    },
  },
  watch: {
    position(val) {
      this.left = val.x;
      this.top = val.y;
    }
  },
  props: {
    dataSource: {
      type: [Object, Array],
      default: () => [],
    },
    position: {
      type: Object,
      default: () => ({ x: 0, y: 0 })
    },
  },
};
</script>
<style lang="scss">
.dialog-list {
  width: 400px;
  background: #1a2a47;
  // position: fixed;
  z-index: 4;
  .el-dialog__wrapper {
    position: absolute;
  }
}
</style>
